import {Form, Input, Modal, Select, TimePicker,message} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import React, {Component} from 'react';
import moment from 'moment';
import { updateCourse, removeCourse ,queryCourse, addCourse,queryClassroom,queryDepartment,queryTeacher } from '../service';
const Option = Select.Option;
const { RangePicker } = TimePicker;
interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  onSubmit: (fieldsValue: { desc: string }) => void;
  onCancel: () => void;
}

class CreateForm extends Component<CreateFormProps> {
   constructor(props: CreateFormProps) {
    super(props);
    this.state = {};
  }
  // componentWillUpdate(){
  //   this.setState = () => {
  //     return;
  //   };
  // }
  formRef = React.createRef();
  componentWillMount = async () => {
    try {
      let classroom = await queryClassroom();
      let department =  await queryDepartment();
      let teacher = await queryTeacher();

      let classroom_option:any = [];
      classroom.data.map((data)=>{
        classroom_option.push(<Option value={data.id} key={data.key}>{data.name}</Option>);
      })

      let department_option:any = [];
      department.data.map((data)=>{
        department_option.push(<Option value={data.id} key={data.key}>{data.department_name}</Option>);
      })

      let teacher_option:any = [];
      teacher.data.map((data)=>{
        teacher_option.push(<Option value={data.id} key={data.key}>{data.username}</Option>);
      })
      this.setState({
        teacher:teacher_option,
        classroom : classroom_option,
        department : department_option
      })
    }
    finally {

    }
  }
  render() {
    const {Option} = Select;
    const format = 'HH:mm';
    const FormItem = Form.Item;
    const {modalVisible, form, onSubmit: handleAdd, onCancel} = this.props;

    const okHandle = () => {
      const {form, onSubmit: handleAdd} = this.props;
      let {validateFields} =  this.formRef.current;
      validateFields().then(values=>{
        console.log(values);
        let time = this.state.time;
        if(time == undefined){
          message.error("请填写时间");
          return;
        }
        let data = {
          course_name: values.course_name,
          department_id: values.department_id,
          classroom_id: values.classroom_id,
          people_num: values.people_num,
          time: `${time[0]}-${time[1]}`,
          teacher_id:values.teacher_id
        }
        console.log(data);
        if(data.course_name == undefined || data.department_id == undefined || data.teacher_id == undefined
          || data.classroom_id == undefined || data.people_num == undefined){
          message.error("请填写所有信息");
          return;
        }
        console.log(data);
        handleAdd(data);
      })
    };
    function handleChange(value){
      console.log(`selected ${value}`);
    }

    function onChange(value) {
      console.log(`selected ${value}`);
    }

    function onBlur() {
      console.log('blur');
    }

    function onFocus() {
      console.log('focus');
    }

    function onSearch(val) {
      console.log('search:', val);
    }
    const onTimeChange = (value, dateString) =>{
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.setState({
        time : dateString
      })
    }
    return (
      <Modal
        destroyOnClose
        title="新建课程"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <Form
          ref={this.formRef}>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          name="course_name"
          label="课程名称"
          rules={[
            {
              required: true,
              message: '请填写！',
            },
          ]}
        >
         <Input placeholder="请输入课程名称"/>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="系部名称"
          name="department_id"
        >
          <Select
            showSearch
            style={{width: 200}}
            placeholder="Select a person"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
              {this.state.department}
          </Select>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="请选择教室"
          name="classroom_id"
        >
          <Select
            showSearch
            style={{width: 200}}
            placeholder="Select a person"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {this.state.classroom}
          </Select>
        </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="请选择教师"
          name="teacher_id"
        >
          <Select
            showSearch
            style={{width: 200}}
            placeholder="Select a person"
            optionFilterProp="children"
            onChange={onChange}
            onFocus={onFocus}
            onBlur={onBlur}
            onSearch={onSearch}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {this.state.teacher}
          </Select>
        </FormItem>

          <FormItem
            labelCol={{
              span: 5,
            }}
            wrapperCol={{
              span: 15,
            }}
            label="选择上课时间"
          >
            <RangePicker onChange={onTimeChange}/>
          </FormItem>
        <FormItem
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 15,
          }}
          label="选择上课人数"
          name="people_num"
        >
          <Input placeholder="请输入人数" type='number'/>
        </FormItem></Form>
      </Modal>
    );
  }
};

export default CreateForm;
